<template>
  <div class="app-course">
    <el-card>
      <div slot="header">
        数据筛选
      </div>
      <el-form
        ref="form"
        :model="queryObject"
        :inline="true"
        class=" demo-form-inline"
      >
        <el-form-item label="课程名称" prop="courseName">
          <el-input v-model="queryObject.courseName"></el-input>
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-select v-model="queryObject.status" placeholder="请选择">
            <el-option
              :value="undefined"
              label="全部">
            </el-option>
            <el-option
              label="上架"
              value="1">
            </el-option>
            <el-option
              label="下架"
              value="0">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button @click="reset" :disabled="isLoading">重置</el-button>
          <el-button type="primary" @click="onSubmit" :disabled="isLoading">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card>
      <div slot="header">
        查询结果
        <el-button type="primary" style="float: right" @click="$router.push({name: 'create-course'})">添加课程</el-button>
      </div>
      <div v-loading="isLoading">
        <el-table
          :data="courses"
          border
          style="width: 100%">

          <el-table-column
            prop="id"
            label="ID">
          </el-table-column>

          <el-table-column
            prop="courseName"
            label="课程名称">
          </el-table-column>

          <el-table-column
            prop="price"
            label="价格">
          </el-table-column>

          <el-table-column
            prop="sortNum"
            label="排序">
          </el-table-column>

          <el-table-column
            label="上架状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
                @change="changeState(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            width="180"
            align="center">
            <template slot-scope="scope">
              <el-button
                size="small"
                @click="$router.push({name: 'edit-course', params: { courseId: scope.row.id }})">
                编辑
              </el-button>
              <el-button
                size="small"
                @click="$router.push({name: 'course-section', params: { courseId: scope.row.id }})"
              >内容管理
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          :query-object="queryObject"
          :loadPage="loadCourses"
          @pageChange="pageChange"
          :total="total"
        ></pagination>

      </div>
    </el-card>
  </div>
</template>

<script>
  import { changeCourseState, getQueryCourses } from '@/services/course'
  import Pagination from '@/components/Pagination'

  export default {
    name: 'CourseIndex',
    components: {
      Pagination,
    },
    data() {
      return {
        queryObject: {
          courseName: '',
          status: undefined,
          page: 1,
          size: 10,
        },
        isLoading: false,
        courses: [],
        total: 0,
      }
    },
    created() {
      this.loadCourses()
    },
    methods: {
      async loadCourses() {
        this.isLoading = true
        const queryObject = Object.assign({}, this.queryObject, {
          currentPage: this.queryObject.page,
          pageSize: this.queryObject.size
        })
        const { code, data } = await getQueryCourses(queryObject)
        if (code === '000000') {
          this.courses = data.records
          this.total = data.total
        }
        this.isLoading = false
      },
      pageChange({ page, size }) {
        this.queryObject.page = page || this.queryObject.page
        this.queryObject.size = size || this.queryObject.size
      },
      reset() {
        this.$refs.form.resetFields()
        this.queryObject.page = 1
        this.loadCourses()
      },
      onSubmit() {
        this.queryObject.page = 1
        this.loadCourses()
      },
      async changeState(course) {
        const { code } = await changeCourseState({
          courseId: course.id,
          status: course.status,
        })
        if (code === '000000') {
          course.status ? this.$message.success('上架成功') : this.$message.success('下架成功')
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
</style>
